<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        width: 100%;
      }
      button {
        color: #fff;
        width: 120px;
        height: 30px;
        border: 0;
        margin: 5px;
        padding: 0;
        background-color: rgb(67, 187, 161);
      }
      div {
        margin: 5px auto;
        padding: 10px;
        text-align: center;
      }
      .bg1 {
        background-color: rgb(243, 230, 158);
      }
      .bg2 {
        background-color: slateblue;
      }
      .fontcolor1 {
        color: orangered;
      }
      .fontcolor2 {
        color: #fff;
      }
      .hw1 {
        height: 10rem;
        width: 20rem;
      }
      .hw2 {
        height: 20rem;
        width: 30rem;
      }
    </style>
  </head>

  <body>
    <div>
      <button id="btn1">显示样式及个数</button>
      <button id="btn2">第1个样式名称</button>
      <button id="btn3">追加类</button>
      <button id="btn4">替换类</button>
    </div>
    <div class="stu bg1 hw1" data-sno="0001">学生信息</div>
    <script>
      const stu = document.querySelector(".stu");
      //   console.log(stu.textContent, stu.dataset);
      //   // 将自定义属性sno的值写入div内容
      //   stu.textContent += stu.dataset.sno;
      //   //   添加类
      //   stu.classList.add("fontcolor");
      //   //   使用类bgc2替换类bgc
      //   stu.classList.replace("bgc", "bgc2");
      //   //   删除类hw
      //   stu.classList.remove("hw");
      document.querySelector("#btn1").onclick = function () {
        console.log(stu.classList);
        console.log(stu.classList.length);
      };
      // 传统方式
      document.querySelector("#btn2").onclick = function () {
        console.log(stu.classList.item(0));
      };
      document.querySelector("#btn3").onclick = function () {
        stu.classList.add("fontcolor1");
        stu.classList.add("hw2");
        console.log(stu.classList);
      };
      document.querySelector("#btn4").onclick = function () {
        stu.classList.replace("bg1", "bg2");
        stu.classList.replace("fontcolor1", "fontcolor2");
        console.log(stu.classList);
      };
    </script>
  </body>
</html>
